<template>
	<view class="center">
		<navBar :title="$t('tabBar.my')"></navBar>
		<view class="item hdimg">
			<view>{{$t('user.User-hdimg')}}</view>
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<!-- <image class="avatar" :src="userInfo.avatar ? userInfo.avatar : '/static/image/hd_img.png'"></image> -->
				<image class="avatar" :src="userInfo.avatar ? userInfo.avatar :'/static/image/hd_img.png'"></image>
			</button>
		</view>
		<view class="item">
			<view class="item-left">{{$t('user.User-nickname')}}</view>
			<view class="item-right">
				<input type="nickname" class="userName" :placeholder="$t('please.enter.nickname')"
					v-model="userInfo.name" @change="getNickname"></input>
			</view>
		</view>

		<view class="item">
			<view class="item-left">{{$t('user.gender')}}</view>
			<view class="item-right">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="userInfo.gender" :range="array">
								<view class="uni-input">{{array[userInfo.gender || 0]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="item-left">{{$t('user.birthday')}}</view>
			<view class="item-right">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">{{userInfo.birthday || $t('user.secrecy')}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="item-left">{{$t('user.phone')}}</view>
			<view class="item-right">
				{{userInfo.phone || $t('user.unknown-phone')}}
			</view>
		</view>

		<!-- <view>{{$t('common.Chinese-English')}}</view> -->
		<view class="item" @click="opne">
			<view class="item-left">{{$t('common.Chinese-English')}}</view>
		</view>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<view class="item">
				<view class="item-right">
					<view class="locale-list">
						<view class="locale-item" v-for="(item, index) in locales" :key="index"
							@click="onLocaleChange(item)">
							<view class="icon">
								<icon v-if="item.code == applicationLocale" type="success_no_circle" size="20" />
							</view>
							<text class="text">{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<view class="btn-item flex_col active" @click="handleUpdateUser">{{$t('locale.save_modifications')}}</view>
	</view>

</template>

<script>
	import {
		API_URL
	} from '@/env'
	import {
		getUserInfo,
		updateUser
	} from '@/api/my.js'
	import config from '@/utils/util.js'
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {


				show: false,
				avatarimg: '', // 头像图片的URL
				array: [this.$t('user.secrecy'), this.$t('user.male'), this.$t('user.female')],
				index: 0,
				date: currentDate,
				userInfo: {
					gender: 0
				},
				i18nValue: 0,
				// systemLocale: '',
				applicationLocale: '',
			};
		},
		onShow() {
			this.array = [this.$t('user.secrecy'), this.$t('user.male'), this.$t('user.female')];
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					}
				]
			}
		},
		onShow() {
			this.getUserInfo(); //获取个人信息
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			// this.systemLocale = systemInfo.language;
			console.log('systemInfo==', this.locales[this.i18nValue].text, systemInfo.language)
			this.applicationLocale = uni.getLocale();
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})

		},
		methods: {
			opne() {
				this.$refs.share.open()
			},
			initData() {
				this.array = [this.$t('user.secrecy'), this.$t('user.male'), this.$t('user.female')];
			},
			// 获取微信名称
			getNickname(e) {
				this.userInfo.name = e.detail.value
			},
			getUserInfo() {
				getUserInfo().then((r) => {
					this.userInfo = r.data;
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.userInfo.gender = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.userInfo.birthday = e.detail.value
			},
			// 中英文切换
			onLocaleChange(e) {
				uni.setLocale(e.code);
				this.$i18n.locale = e.code;
				for (let i = 0; i < 3; i++) {
					uni.setTabBarItem({
						index: i,
						text: i == 0 ? this.$t('tabBar.home') : i == 1 ? this.$t('tabBar.device') : this.$t(
							'tabBar.my'),
					})
				}
				this.$refs.share.close()
				this.initData();

			},
			// 修改昵称
			handleUpdateUser() {
				updateUser({
					...this.userInfo
				}).then((r) => {
					this.config.Toast(this.$t('modified.successfully'));
					// this.userInfo = r.data;
				});
			},
			// 手动获取头像
			async onChooseavatar(e) {
				await uni.uploadFile({
					url: API_URL + '/backstage/file/upload', // 你的上传API地址
					filePath: e.detail.avatarUrl,
					name: 'file', // 这里根据API的要求进行修改
					header: {
						'Content-Type': 'multipart/form-data',
						'Accept': 'application/json, text/plain, */*',
					},
					formData: {
						token: uni.getStorageSync('token')
					},
					success: async uploadFileRes => {
						let res = JSON.parse(uploadFileRes.data)
						console.log('res==', res.data.url)
						this.userInfo.avatar = res.data.url;
					},
					fail: uploadFileError => {
						// 处理上传失败的错误
					}
				});

			},
			openUp() {
				this.show = true
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}

	.icon {
		display: flex;
		padding-top: 15rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.locale-item {
		display: flex;
		align-items: center;
		align-content: center;
	}

	.avatar-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: none;
		outline: none;
		background-color: transparent;
		cursor: pointer;
		padding: 0;
		margin: 0;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		object-fit: cover;
	}

	button::after {
		border: none;
		padding: 0;
		margin: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.u-safe-bottom {
		display: none;
	}

	.center {
		box-sizing: border-box;

		.up-pop {
			width: 580rpx;

			.up-title {
				font-size: 32rpx;
				color: #999999;
				margin: 48rpx 0 36rpx 0;
			}

			.up-cont {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 63rpx;
			}

			.up-btn {
				height: 76rpx;
				background: #212222;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
			}
		}

		.btn-item {
			width: 350rpx;
			height: 90rpx;
			background: #AF9453;
			color: #fff;
			border-radius: 15rpx;
			text-align: center;
			margin: 50px auto;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 100rpx;
			border-bottom: 1px solid #f5f5f5;
			padding: 0 40rpx;
			background: #fff;

			.item-left {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.item-right {
				text-align: right;
			}

			.jcbtn {
				width: 144rpx;
				height: 51rpx;
				border-radius: 26rpx;
				border: 1px solid #ccc;
				font-size: 24rpx;
			}

			.icon-arrow {
				position: relative;
				padding-right: 25rpx;
			}

			.icon-arrow:after {
				content: '';
				position: absolute;
				top: 15rpx;
				right: -1px;
				width: 14rpx;
				height: 14rpx;
				border-top: 1rpx solid #ccc;
				border-right: 2rpx solid #ccc;
				transform: rotate(45deg);
			}
		}
	}
</style>